<template>
  <div class="login-index">
    <div class="login-box">
      <div class="login-tabs">
        <el-tabs v-model="activeName" type="border-card" stretch>
          <el-tab-pane label="账号登录" name="account">
            <template #label>
              <el-icon>
                <UserFilled/>
              </el-icon>
              <span>帐号登录</span>
            </template>
            <el-form ref="formRef" :rules="rules" :model="formData">
              <el-form-item label="帐号:" label-width="60px" prop="account">
                <el-input v-model="formData.account" type="phone" placeholder="请输入帐号" clearable></el-input>
              </el-form-item>
              <el-form-item label="密码:" label-width="60px" prop="password">
                <el-input v-model="formData.password" type="password" placeholder="请输入密码" show-password></el-input>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <el-tab-pane label="扫码登录" name="scan">
            <template #label>
              <el-icon>
                <Iphone/>
              </el-icon>
              <span>扫码登录</span>
            </template>
            <LoginScan/>
          </el-tab-pane>
        </el-tabs>

        <div class="controls">
          <el-checkbox v-model="isRemPwd" label="记住密码" size="large"/>
          <el-link href="/forget/pwd" type="primary" style="text-decoration: none;">忘记密码</el-link>
        </div>
        <el-checkbox size="large" v-model="agree">
          我已同意用户《隐私条款和服务条款》
        </el-checkbox>
        <div class="login-btn">
          <el-button type="primary" @click="handleLogin">
            立即登录
          </el-button>
          <el-button type="primary" @click="router.push('/register')">
            快速注册
          </el-button>
        </div>
      </div>
    </div>
  </div>

  <!-- 底部 -->
  <div class="login-footer">
    <div class="lg-bg">
      <ul>
        <li>关于我们</li>
        <li>帮助中心</li>
        <li>售后服务</li>
        <li>配送与验收</li>
        <li>商务合作</li>
        <li>搜索推荐</li>
        <li>友情链接</li>
      </ul>
      <div class="tips">CopyRight © 小兔鲜儿 京ICP备19006430号</div>
    </div>

  </div>

</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'
import {useUserStore} from '@/store/userStore.js'
import {useRouter} from 'vue-router'
import {UserFilled, Iphone} from '@element-plus/icons-vue'
import LoginScan from './LoginScan.vue'
import {ElMessage} from "element-plus";

const router = useRouter()
const activeName = ref('account')
const isRemPwd = ref(true)
const formRef = ref(null)
const userStore = useUserStore()


// 1、formData 表单数据
const formData = reactive({
  account: '12056258282',
  password: 'hm#qd@23!'
})

// 2、rules 表单验证规则
const rules = {
  account: [
    {required: true, message: '用户名不能为空', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '密码不能为空', trigger: 'blur'},
    {min: 6, max: 14, message: '密码长度为6-14个字符', trigger: 'blur'},
  ]
}
const agree = ref(true)

// 3、handleLogin 校验登录事件
const handleLogin = async () => {
  if (!agree.value) {
    ElMessage.error('请同意用户使用协议')
  } else {
    formRef.value.validate((valid) => {
      if (valid) {
        userStore.gotoLogin({
          account: formData.account,
          password: formData.password
        }).then(() => {
          router.push('/home')
        }).catch(() => {
          ElMessage.error('登录失败，请检查帐号或密码')
        })
      } else {
        ElMessage.error('请检查输入项')
      }
    })

  }
}


</script>

<style scoped lang="scss">
@import '../login/login.css';

.login-index {
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  background: url('@/assets/images/login-bg.png') no-repeat center center/cover;
  position: relative;

  .login-box {
    width: 1240px;
    display: flex;
    justify-content: center;
    align-items: center;

    .login-tabs {
      display: flex;
      flex-direction: column;
      width: 400px;
      margin-left: 500px;
      border-radius: 10px;
      background-color: #f6f6f6;
      padding: 20px;
    }
  }
}

.login-footer {
  width: 100%;
  background-color: #ffffff;

  .lg-bg {
    width: 1240px;
    margin: 0 auto;
    padding: 15px 0;
    text-align: center;
    font-size: 20px;
    color: #999;

    li {
      display: inline-block;
      border-right: 1px solid #e4e4e4;
      padding: 0 20px;
      margin: 15px 0;

      &:hover {
        color: #27ba9b;
      }

      &:last-child {
        border-right: none;
      }
    }

    .tips {
      margin: 10px
    }
  }
}


.el-tabs {
  color: #27ba9b;
  font-size: 20px;
  font-weight: bold;

  .el-icon {
    margin-right: 5px;
    color: #27ba9b;
  }

  span {
    color: #27ba9b;
    font-size: 16px;
    font-weight: normal;
  }
}


</style>